<template>
  <div
    v-if="isShowSorties"
    class="today-waring-container"
    :style="single ? 'top: 17%; left: 51%' : 'top: 19%; left: 51%'"
    @click.stop
  >
    <div class="today-waring-title">
      <div>无人机架次</div>
      <div>{{ sorties.drone }}</div>
    </div>
    <div class="today-waring-line"></div>
    <div class="today-waring-title">
      <div>通航架次</div>
      <div>{{ sorties.general }}</div>
    </div>
    <div class="today-waring-line"></div>
    <div class="today-waring-title">
      <div>民航架次</div>
      <div>{{ sorties.ADS_B }}</div>
    </div>
  </div>
</template>
<script setup>
import useCockpitStore from "@/store/modules/cockpit";
import useToolTabStore from "@/store/modules/toolTab";
import { computed } from "vue";

const cockpitStore = useCockpitStore();
const toolTab = useToolTabStore();

const props = defineProps({
  single: {
    type: Boolean,
    default: false,
  },
});

const sorties = computed(() => {
  return cockpitStore.deteceSorties || {};
});

const isShowSorties = computed(() => {
  return toolTab.isTodatSorties;
});
</script>
<style lang="scss" scoped>
.today-waring-container {
  position: absolute;
  z-index: 99;
  width: 220px;
  height: auto;
  padding: 19px 30px 24px;
  border-radius: 7px;
  top: 17%;
  left: 50%;
  background-color: rgba(9, 27, 35, 0.8);
  //top: 200px;
  //left: 200px;
  border: 1px rgba(255, 255, 255, 0.6) solid;
  animation: rotate 3s linear infinite;
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);

  .today-waring-title {
    font-size: 16px;
    display: flex;
    justify-content: space-between;
    color: #00fcff;
    div:nth-child(1) {
      font-family: PingFang SC;
    }
    div:nth-child(2) {
      font-family: DigifaceWide;
    }
  }
  .today-waring-line {
    width: 100%;
    height: 1px;
    border: 1px #f2f2f2 dashed;
    opacity: 0.2;
    margin: 16px 0 12px;
  }
}

@keyframes rotate {
  0% {
    border: 1px rgba(255, 255, 255, 0.4) solid;
  }
  50% {
    border: 1px #ffffff solid;
  }
  100% {
    border: 1px rgba(255, 255, 255, 0.4) solid;
  }
}
</style>
